import axios from 'axios'
import { getToken } from '@/utils/auth'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // baseURL: 'https://heimahr.itheima.net/api',
  // baseURL: '/api', // 将api文件夹里面的请求 地址 用 /api拼接一下
  //  // 请求的超时时间，有些请求比如数据量比较大，那么需要的时间比较长比如需要6s才能返回
  // 请求超时报的错误 有个单词  timeout
  timeout: 10000
})

// 请求拦截器 --- 一般在请求拦截器里面 给所有请求添加一个token，属性一般是Authorization
service.interceptors.request.use(
  config => {
    const token = getToken()
    if (token) {
      // 如果cookie里面有token，就给所有的请求头 添加一个token值，属性名称 去接口文档里面找
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  // 响应成功 200 执行第一个回调函数
  response => {
    // 提前将服务器返回的 二进制的流数据 单独处理
    if (response.data instanceof Blob) return response.data

    // 进入这个函数以后，表示http请求成功，但是业务可能成功可能失败 （登录请求，请求成功，账号密码输入错误，也会执行第一个回调函数）
    // if (response.data.code === 10000) { // 看文档业务成功失败的状态
    if (response.data.success) {
      // 在响应拦截器里面 对返回的数据脱壳处理，axios会默认吧服务器的返回值给我包装为一个大对象
      return response.data
    } else {
      // 如果业务失败，应该给用户一个提示
      Message({
        message: response.data.message || '111请求业务失败',
        type: 'error'
      })
      // 业务失败，给前端也应该抛出一个错误，
      return Promise.reject(response)
    }
  },
  // 响应失败 4xx  5xx 执行第二个函数
  error => {
    if (error.response.status === 401) {
      // 进入了这里，表示token失效了，我们应该 清除vuex的 token userInfo 本地储存的cookie都要清除，然后跳转回登录页面
      store.commit('user/delTokenMutation')
      router.push('/login')
      return Promise.reject(error)
    }
    // error是一个对象，如果默认使用console.log打印，得到的是一个字符串，不能展开，看里面的细节
    // 需要主动的使用console.dir 将 error当做一个对象来打印
    console.dir(error)
    Message({
      message: error.response.data.message || '请求失败',
      type: 'error'
    })
    return Promise.reject(error)
  }
)

export default service
